<template>
   <!-- 底部 -->
   <div class="footer1">
      <div class="footer_one">
        <div class="wrapper">
          <div class="container">
            <span>友情链接：</span>
            <ul class="one">
              <li>
                <a href="#">高校合作网站链接</a>
              </li>
              <li>
                <a href="#">校内网站链接</a>
              </li>
              <li>
                <a href="#">其他友情链接</a>
              </li>
            </ul>
            <ul class="two">
              <li>
                <a href="#">
                  <i class="icon1"></i>
                  电子校历
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon2"></i>
                  电子校历
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon3"></i>
                  电子校历
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon4"></i>
                  电子校历
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer_two">
        <div class="wrapper">
          <div class="footer_two_text">
            <span>
              版权所有：西安交通大学党委宣传部 网站建设：网络信息中心 书法设计：
              人文学院 杨晓萍 陕ICP备06008037号-5
            </span>
            <ul>
              <li><a href="#">联系我们</a>|</li>
              <li><a href="#">联系我们</a>|</li>
              <li><a href="#">联系我们</a>|</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
</template>

<style lang="scss">
  // 底部样式
.footer1 {
  .footer_one {
    padding-top: 90px;
    // background-color: #fff;
    .container {
      height: 45px;
      line-height: 45px;
      background-color: rgb(229, 184, 241);
      background: #b3312a;
      span {
        float: left;
        display: block;
        width: 95px;
        height: 45px;
        color: #ffffff;
        font-size: 14px;
        background: #b3312a;
        padding-left: 24px;
      }
      .one {
        float: left;
        li {
          width: 180px;
          height: 4px;
          display: inline-block;
          a {
            color: #fff;
            font-size: 14px;
          }
        }
      }
      .two {
        li:first-child {
          border-left: 1px solid #fff;
          border-right: 1px solid #fff;
        }
        li:nth-child(2) {
          border-right: 1px solid #fff;
        }
        li:nth-child(3) {
          border-right: 1px solid #fff;
        }
        li {
          box-sizing: border-box;
          width: 185px;
          display: inline-block;
          text-align: center;

          a {
            line-height: 45px;
            font-size: 14px;
            color: #ffffff;
            i {
              width: 21px;
              height: 20px;
              float: left;
              display: block;
              margin-top: 13px;
              margin-right: -15px;
              margin-left: 50px;
            }
            .icon1 {
              background: url(../assets/yxtx/xl1.png) no-repeat;
            }
            .icon2 {
              background: url(../assets/yxtx/weibo2.png) no-repeat;
            }
            .icon3 {
              background: url(../assets/yxtx/wx3.png) no-repeat;
            }
            .icon4 {
              background: url(../assets/yxtx/tt4_03.png) no-repeat;
            }
          }
        }
      }
    }
  }
  .footer_two {
    height: 70px;
    background-color: #7f1915;
    .footer_two_text {
      display: flex;
      justify-content: space-between;
      line-height: 70px;
      font-size: 12px;
      color: #fff;
      ul {
        li {
          display: inline-block;
          a {
            margin: 0 10px;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>